<template>
  <div>
    <Modal :value="modalVisible" width="360" @on-visible-change="handleChangeVisible">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="ios-information-circle"/>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>如果你执意删除，必须知道此操作无法撤消，这将永久删除！</p>
      </div>
      <div slot="footer">
        <Button
          lang
          :type="type"
          :size="large"
          :loading="modalLoading"
          @click="handleDelete">
          确认删除
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: 'delete-modal',
    props: {
      modalVisible: {
        type: Boolean,
        default: false
      },
      modalLoading: {
        type: Boolean,
        default: true
      },
      deleteId: {
        type: Number,
        default: 0
      }
    },
    data () {
      return {
        large: 'large',
        type: 'error',
      }
    },
    methods: {
      handleDelete: function () {
        if (this.deleteId) {
          this.$emit('handleDelete', this.deleteId)
        }
      },
      handleChangeVisible: function (val) {
        this.$emit('handleChangeVisible', val)
      },
    }
  }
</script>

<style scoped>

</style>
